<template>
  <div><van-tabbar class="fz" v-model="active" active-color="#ee0a24" inactive-color="#000" @change="changeTab">
    <!--使用vant里面的icon图标组件-->
  <van-tabbar-item >
    <van-icon class="iconfont icon-dianying"
    size="22" slot="icon"></van-icon>
    <p>电影</p>
    </van-tabbar-item>

   <van-tabbar-item >
    <van-icon class="iconfont icon-yingyuan"
    size="22" slot="icon"></van-icon>
    <p>影院</p>
    </van-tabbar-item>

     <van-tabbar-item >
    <van-icon class="iconfont icon-chengshi"
    size="22" slot="icon"></van-icon>
    <p>城市</p>
    </van-tabbar-item>

     <van-tabbar-item >
    <van-icon class="iconfont icon-wode"
    size="22" slot="icon"></van-icon>
    <p>我的</p>
    </van-tabbar-item>
</van-tabbar></div>
</template>

<script>
//导入阿里矢量图的css文件
import "@/assets/icofont/iconfont.css"
//导入需要的vant组件
import Vue from 'vue';
import { Tabbar, TabbarItem, Icon} from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Icon);
export default {
  //在组件里data必须是一个函数所以不能怎么写
// data: {
//   active: 0
// }
data: function() {
  return {
    active: 0,
    url:["/Films/NowPlaying","/cinemas","/city","/center"]
  };
},
methods: {
  //改变菜单后发出的索引下标
  changeTab(index){
//此处可以使用分支来判断跳转地址，但是代码量比较大不建议使用，if与switch
//优化方案:提前定义好数组，让下标对应上
//console.log(index);
this.$router.push(this.url[index])
  },
},
//在某个生命周期中去使用去解决地址因为刷新导致的active归零的情况
created(){
  //思路：先去获取地址栏中的路径
 // console.log(this.$route);
 let path = this.$route.path;
 let index = this.url.indexOf(path)
 //console.log(index);
 //纠正索引
 this.active = path ==="/films/comingSoon" ? 0 : index;
}
}
</script>

<style>
.van-tabbar-item{
  font-size: 3px;
}
</style>